<template>
	<view class="content-nav">
		<view class="nav-title">
			{{contentName}}
		</view>
		<view class="nav-list">
			<view class="nav-box" v-for="(item,index) in navList" :key='index' @click="toPages(item)">
				<view class="nav-box-image">
					<image :src='item.imageUrl' :style="{width:item.width,height:item.height}"></image>
				</view>
				<view class="nav-box-name">
					{{item.navName}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				contentName: '',
				navList: [
				]
			}
		},
		created() {
			this.navList=this.data.list;
			this.contentName=this.data.name
			
		},
		methods:{
			toPages(item){
				if(item.directUrl==''){
					uni.showToast({
						title:'功能在升级中，无法使用！',
						duration:2200
					})
					return;
				}else{
					uni.navigateTo({
						url:item.directUrl
					})
				}
			}
		}
		
	}
</script>

<style lang="scss">
	.content-nav {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;

		.nav-title {
			flex: 1;
			height: 46rpx;
			line-height: 46rpx;
			padding-left: 36rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			position: relative;
			margin-bottom: 20rpx;

			&:after {
				content: '';
				width: 4rpx;
				height: 28rpx;
				background: #407AE0;
				position: absolute;
				top: 9rpx;
				left: 24rpx;
				border-radius: 4rpx;
			}
		}

		.nav-list {
			display: flex;
			width: 100%;
			height: auto;
			justify-content: flex-start;
			flex-direction: row;
			flex-wrap: wrap;
			.nav-box {
				width: 50%;
				text-align: center;
				margin-bottom: 26rpx;
                 align-content: flex-start;
				// align-self: flex-start;
				.nav-box-image {
					width: 56rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					margin: auto;

					image {
						display: inline-block;
						width: 100%;
						height: 100%;
						// max-height: 100%;
						// max-width: 100%;
					}
				}

				.nav-box-name {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
					line-height: 34rpx;
					text-align: center;
				}
			}
		}
	}
</style>
